<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="header">
			<text class="current-time">{{ currentTime }}</text>
			<view class="cinema-info">
				<text class="cinema-name">{{ cinemaInfo.name }}</text>
				<text class="cinema-location">{{ cinemaInfo.location }}</text>
			</view>
		</view>

		<!-- 状态标签 -->
		<view class="status-tags">
			<text v-for="(tag, index) in statusTags" :key="index" class="tag">{{ tag }}</text>
		</view>

		<!-- 时间提示 -->
		<view class="time-alert">
			<text>您选的场次将在{{ remainingTime }}分钟内开场，请仔细核对</text>
		</view>

		<!-- 电影信息 -->
		<view class="movie-header">
			<text class="movie-title">{{ movieInfo.title }}</text>
			<view class="session-info">
				<text>{{ formatSessionTime(currentSession) }}</text>
				<button class="change-session" @click="showSessionPicker = true">切换场次 ➤</button>
			</view>
		</view>

		<!-- 座位图 -->
		<view class="seat-map">
			<view class="screen">银幕位置</view>
			<view v-for="(row, rowIndex) in seatMap" :key="rowIndex" class="seat-row">
				<text class="row-number">{{ rowIndex + 1 }}</text>
				<view v-for="(seat, seatIndex) in row" :key="seatIndex" :class="['seat', seatClasses(seat)]"
					@click="toggleSeat(seat)">
					{{ seat.seatNumber }}
				</view>
			</view>
		</view>

		<!-- 推荐座位 -->
		<view class="recommendation">
			<text class="section-title">推荐座位</text>
			<view class="recommend-buttons">
				<button v-for="n in 5" :key="n" class="recommend-btn" @click="recommendSeats(n)">
					{{ n }}人
				</button>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<text class="notice">{{ cinemaInfo.notice }}</text>
			<view class="actions">
				<text class="notification-badge">5个通知 ></text>
				<button class="confirm-btn" @click="handleConfirm">确认选座</button>
			</view>
		</view>

		<!-- 场次选择弹窗 -->
		<uni-popup ref="sessionPopup" type="bottom">
			<view class="session-picker">
				<text class="picker-title">选择场次</text>
				<view v-for="(session, index) in sessions" :key="index"
					:class="['session-item', { active: session.id === currentSession.id }]"
					@click="selectSession(session)">
					<text>{{ formatSessionTime(session) }}</text>
					<text>余座: {{ session.remainingSeats }}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 响应式数据
	const currentTime = ref('3:22');
	const showSessionPicker = ref(false);
	const selectedSeats = ref(new Set());

	// 影院信息
	const cinemaInfo = reactive({
		name: '自丽宫影城',
		location: '恒隆广场店',
		notice: '影城提供免费3D眼镜，出场请及时归还。'
	});

	// 电影信息
	const movieInfo = reactive({
		title: '哪吒之魔童闹海',
		sessions: []
	});

	// 场次数据
	const sessions = ref([{
			id: 1,
			time: '2023-02-18 15:35',
			remainingSeats: 45
		},
		{
			id: 2,
			time: '2023-02-18 18:20',
			remainingSeats: 32
		}
	]);

	const currentSession = ref(sessions.value[0]);

	// 座位图数据
	const seatMap = ref(generateSeatMap(8, 12));

	// 状态标签
	const statusTags = ['已售', '默认区域', 'VIP座位', '不可售'];

	// 计算属性
	const remainingTime = computed(() => {
		const diff = new Date(currentSession.value.time) - new Date();
		return Math.floor(diff / 60000);
	});

	// 生成座位图
	function generateSeatMap(rows, cols) {
		return Array.from({
				length: rows
			}, (_, row) =>
			Array.from({
				length: cols
			}, (_, col) => ({
				seatNumber: `${row + 1}排${col + 1}座`,
				status: Math.random() < 0.2 ? 'sold' : Math.random() < 0.1 ? 'locked' : 'available',
				row: row + 1,
				col: col + 1
			}))
		);
	}

	// 座位状态样式
	function seatClasses(seat) {
		return {
			'sold': seat.status === 'sold',
			'locked': seat.status === 'locked',
			'selected': selectedSeats.value.has(seat.seatNumber)
		};
	}

	// 选座切换
	function toggleSeat(seat) {
		if (seat.status !== 'available') return;

		const seatKey = seat.seatNumber;
		if (selectedSeats.value.has(seatKey)) {
			selectedSeats.value.delete(seatKey);
		} else {
			selectedSeats.value.add(seatKey);
		}
	}

	// 推荐座位算法（简化版）
	function recommendSeats(num) {
		// 实际应实现推荐算法，这里随机选择
		const available = seatMap.value
			.flat()
			.filter(seat => seat.status === 'available');

		selectedSeats.value = new Set(
			available.slice(0, num).map(seat => seat.seatNumber)
		);
	}

	// 场次时间格式化
	function formatSessionTime(session) {
		const date = new Date(session.time);
		return `今天 ${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
	}

	// 确认选座
	function handleConfirm() {
		if (selectedSeats.value.size === 0) {
			uni.showToast({
				title: '请先选择座位',
				icon: 'none'
			});
			return;
		}
		uni.navigateTo({
			url: `/pages/movie/payment?seats=${[...selectedSeats.value].join(',')}`
		});
	}

	// 初始化加载
	onLoad(() => {
		// 模拟数据请求
		setTimeout(() => {
			movieInfo.sessions = sessions.value;
		}, 500);
	});
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.current-time {
			font-size: 40rpx;
			font-weight: bold;
			margin-right: 30rpx;
		}

		.cinema-info {
			display: flex;
			flex-direction: column;

			.cinema-name {
				font-size: 32rpx;
				color: #333;
			}

			.cinema-location {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.status-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 30rpx;

		.tag {
			padding: 8rpx 16rpx;
			background-color: #eee;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #666;
		}
	}

	.time-alert {
		background-color: #fff9e6;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		color: #e6a23c;
	}

	.movie-header {
		margin-bottom: 40rpx;

		.movie-title {
			font-size: 36rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 20rpx;
		}

		.session-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.change-session {
				background: none;
				color: #007aff;
				font-size: 28rpx;
				padding: 0;
			}
		}
	}

	.seat-map {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;

		.screen {
			text-align: center;
			color: #999;
			margin-bottom: 40rpx;
			font-style: italic;
		}

		.seat-row {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.row-number {
				width: 60rpx;
				text-align: center;
				color: #666;
			}

			.seat {
				width: 60rpx;
				height: 60rpx;
				margin: 4rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				background-color: #f0f0f0;

				&.available {
					background-color: #e8f4ff;

					&:active {
						background-color: #cce5ff;
					}
				}

				&.selected {
					background-color: #007aff;
					color: white;
				}

				&.sold {
					background-color: #ddd;
					color: #999;
				}

				&.locked {
					background-color: #ffe6e6;
					color: #ff6666;
				}
			}
		}
	}

	.recommendation {
		.section-title {
			display: block;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.recommend-buttons {
			display: flex;
			gap: 20rpx;

			.recommend-btn {
				flex: 1;
				background-color: #f0f0f0;
				color: #333;
				border-radius: 8rpx;
				font-size: 28rpx;
				padding: 16rpx 0;

				&:active {
					background-color: #e0e0e0;
				}
			}
		}
	}

	.footer {
		margin-top: 40rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #eee;

		.notice {
			font-size: 24rpx;
			color: #666;
			display: block;
			margin-bottom: 30rpx;
		}

		.actions {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.notification-badge {
				color: #007aff;
			}

			.confirm-btn {
				background-color: #007aff;
				color: white;
				padding: 20rpx 60rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
			}
		}
	}

	.session-picker {
		background-color: white;
		padding: 40rpx;

		.picker-title {
			font-size: 36rpx;
			display: block;
			margin-bottom: 30rpx;
		}

		.session-item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;

			&.active {
				color: #007aff;
			}
		}
	}
</style>